<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body data-testattr="标准写法的自定义属性" data-test-abc="标准写法的自定义属性2">
		<!-- 当浏览器记载页面时，它会“读取（或称之为：“解析”）”HTML并从中生成 DOM 对象。 -->

		<div id="elem" about="Elephant"></div>

		<script>
			document.body.sayTagName = function () {
				// alert(this.tagName)
			}

			document.body.sayTagName()

			// 获取特性
			console.log(elem.getAttribute('ABOUT')) // Elephant
			console.log(elem.getAttribute('about')) // Elephant
			console.log(elem.getAttribute('About')) // Elephant

			// 设置特性
			elem.setAttribute('test', 123)

			// 获取所有的特性
			let allAttrs = elem.attributes
			console.log(allAttrs)
			for (const attr of allAttrs) {
				console.log(`${attr.name} = ${attr.value}`) // id = elem about = Elephant test = 123
			}

			// 所有以 “data-” 开头的特性均被保留供程序员使用。它们可在 dataset 属性中使用。
			// 使用 data-* 特性是一种合法且安全的传递自定义数据的方式。
			console.log(document.body.dataset)
			console.log(document.body.dataset.testattr)
			console.log(document.body.dataset.testAbc)
		</script>
	</body>
</html>
